<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 300px;
            height: 300px;
            /*
                radial-gradient() 径向渐变(放射性的效果)
                    默认情况下径向渐变的形状根据元素的形状来计算的
                        正方形-->圆形
                        长方形-->椭圆形
                        我们也可以手动指定径向渐变的大小
                        circle
                        ellipse

                        也可以指定渐变的位置
                        语法:
                            radial-gradient(大小 at 位置,颜色 位置,颜色 位置,颜色 位置)
                                大小:
                                    circle 圆形
                                    ellipse 椭圆
                                    closest-side 近边
                                    closest-corner 近角
                                    farthest-side 远边
                                    farthest-corner 远角

                                位置:
                                    top right left center bottom

            */
            background-image: radial-gradient(100px 100px at 0 0,red,yellow);

        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>